<template>
    <div class="login">
        <div class="titleBox">
            <div class="title">
                {{ $t('assemble.密码登录') }}
            </div>
            <div class="changeBox" @click="handleChangelang">
                <img v-if="lang == 'zh'" src="../../static/imgs/zha.png" class="changeImg" alt="">
                <img v-if="lang == 'en'" src="../../static/imgs/ena.png" class="changeImg" alt="">
            </div>
        </div>

        <div class="inputBox">
            <div class="innerBox">
                <input class="inputItem" type="text" v-model="email" :placeholder="$t('assemble.请输入邮箱号')">
            </div>
            <div class="innerBox">
                <input class="inputItem" type="password" v-model="password" :placeholder="$t('assemble.请输入密码')">
                <div class="wangji" @click="handleUpdatePassword">
                    {{ $t('assemble.忘记密码') }}
                </div>
            </div>
        </div>



        <div class="btnBox">
            <div class="btn" @click="handleLogin">{{ $t('assemble.登录') }}</div>
            <div class="btn btns" @click="handleRrgister">{{ $t('assemble.注册账号') }}</div>
        </div>


        <div class="agreementBox">
            <div class="checkBox" @click="handleChangestatus">
                <img v-if="checked" class="checkimg" src="../../static/imgs/fill.png" alt="">
                <img v-else class="checkimg" src="../../static/imgs/null.png" alt="">
            </div>

            <div v-if="$i18n.locale == 'zh'" class="" style="margin-left: 5px;">
                <span @click="handleChangestatus">已阅读并同意</span><span class="colors"
                    @click="handleXy(2)">《服务协议》</span><span>和</span><span class="colors" @click="handleXy(0)">《隐私政策》</span>
            </div>


            <div v-else class="" style="margin-left: 5px;">
                <span @click="handleChangestatus">Have read and agree</span><span class="colors" @click="handleXy(0)">'Service
                    Agreement'</span><span> And</span><span class="colors" @click="handleXy(2)">'Privacy Policy'</span>
            </div>

        </div>


    </div>
</template>
  
<script>
import { Toast, } from 'vant';
import { emaillogin } from '../../utils/api'
export default {
    components: {
    },
    data() {
        return {
            lang: 'zh',
            checked: false,
            email: "",
            password: "",

        }
    },
    created() {

    },
    mounted() {
        this.$i18n.locale = 'zh'
        this.lang = 'zh'
        localStorage.setItem('langtype', 'zh')
    },
    methods: {
        handleChangelang() {
            if (this.$i18n.locale == 'en') {
                this.$i18n.locale = 'zh'
                this.lang = 'zh'
            } else {
                this.$i18n.locale = 'en'
                this.lang = 'en'
            }
            localStorage.setItem("langtype", this.$i18n.locale)
        },
        handleChangestatus() {
            this.checked = !this.checked
        },
        async handleLogin() {

            if (!this.email) {
                Toast(this.$t('assemble.请输入邮箱地址'));
                return
            }
            if (!this.password) {
                Toast(this.$t('assemble.请输入密码'));
                return
            }
            if (!this.checked) {
                Toast(this.$t('assemble.请同意服务协议和隐私协议'));
                return
            }
            let data = {
                email: this.email,
                password: this.password
            }

            let res = await emaillogin(data)

            if (res.code == 1) {
                Toast(this.$t('assemble.登录成功'));
                let userData = {
                    chinesename: res.data.chinesename,
                    companyemail: res.data.companyemail,
                    phone: res.data.phone,
                }
                localStorage.setItem('userData', JSON.stringify(userData))
                localStorage.setItem("email", this.email)
                localStorage.setItem('token', res.data.userinfo.token)
                localStorage.setItem('userinfo', JSON.stringify(res.data.userinfo))
                this.$router.push({ path: '/pages/home/index' })
            } else {
                Toast(res.msg);
            }


        },
        handleXy(index) {
            this.$router.push({ path: '/pages/login/yinsi' ,query:{index}})
        },
        handleUpdatePassword() {
            this.$router.push({ path: '/pages/login/forgotPassword' })
        },
        handleRrgister() {
            this.$router.push({ path: '/pages/login/accountRegistration' })

        },
    },
}
</script>
  
<style scoped lang="scss">
body {
    margin: 0px;

    .login {

        @media screen and (max-width: 750px) {

            //48rem对应768px，约等于780px宽度
            .titleBox {
                width: 80%;
                // background-color: pink;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 0 auto;
                margin-top: 70px;


                .title {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 20px;
                    color: #333333;
                    line-height: 23px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                .changeImg {
                    width: 56px;
                    height: 30px;
                }
            }

            .inputBox {
                width: 335px;
                margin: 0 auto;
                margin-top: 50px;



                .innerBox {
                    margin-bottom: 20px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 16px;
                    text-align: left;
                    font-style: normal;
                    position: relative;

                    .inputItem {
                        margin: 0 auto;
                        width: 335px;
                        height: 52px;
                        background: #F8F8F8;
                        border-radius: 10px 10px 10px 10px;
                        margin-bottom: 20px;
                        outline: none;
                        border: none;
                        text-indent: 20px;
                        font-size: 12px;


                    }

                    .wangji {
                        color: #E00000;
                        position: absolute;
                        top: 20px;
                        right: 20px;
                    }

                }


            }

            .btnBox {
                width: 320px;
                margin: 0 auto;

                .btn {
                    width: 320px;
                    height: 44px;
                    background: #E00000;
                    border-radius: 100px 100px 100px 100px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 15px;
                    color: #FFFFFF;
                    line-height: 44px;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                    margin-bottom: 26px;
                }

                .btns {
                    background-color: #FFFFFF;
                    border: 1px solid #E00000;
                    color: #E00000;
                }
            }

            .agreementBox {
                font-family: PingFang SC,
                    PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #999999;
                line-height: 14px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                display: flex;
                align-items: center;
                justify-content: center;

                .checkBox {
                    .checkimg {
                        width: 18px;
                        height: 18px;
                    }
                }

                .colors {
                    color: #333333;
                }

            }


        }

        @media screen and (min-width: 751px) and (max-width: 1300px) {

            //62rem对应992px，约等于1000px宽度
            .titleBox {
                width: 80%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 0 auto;
                margin-top: 140px;


                .title {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 28px;
                    color: #333333;
                    line-height: 23px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                .changeImg {
                    width: 86px;
                    height: 50px;
                }
            }

            .inputBox {
                margin-top: 50px;

                .innerBox {
                    width: 90%;
                    // height: 52px;
                    border-radius: 10px 10px 10px 10px;
                    margin: 0 auto;
                    margin-bottom: 60px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 20px;
                    line-height: 16px;
                    text-align: left;
                    font-style: normal;
                    position: relative;

                    .inputItem {
                        width: 100%;
                        height: 82px;
                        border-radius: 10px 10px 10px 10px;
                        margin-bottom: 20px;
                        outline: none;
                        border: none;
                        background-color: #F8F8F8;
                        text-indent: 20px;
                        font-size: 20px;

                    }

                    .wangji {
                        color: #E00000;
                        position: absolute;
                        top: 35px;
                        right: 20px;
                    }
                }


            }

            .btnBox {
                width: 90%;
                margin: 0 auto;
                margin-top: 100px;

                .btn {
                    width: 100%;
                    height: 68px;
                    background: #E00000;
                    border-radius: 100px 100px 100px 100px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 20px;
                    color: #FFFFFF;
                    line-height: 68px;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                    margin-bottom: 60px;
                }

                .btns {
                    background-color: #FFFFFF;
                    border: 1px solid #E00000;
                    color: #E00000;
                }
            }

            .agreementBox {
                font-family: PingFang SC,
                    PingFang SC;
                font-weight: 400;
                font-size: 20px;
                color: #999999;
                line-height: 14px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                display: flex;
                align-items: center;
                justify-content: center;

                .checkBox {
                    .checkimg {
                        width: 25px;
                        height: 25px;
                    }
                }

                .colors {
                    color: #333333;
                }

            }

        }


    }


}
</style>
  